<template>
  <div>
    <el-row>
      <el-col :span="11">
        <el-card :body-style="{ padding: '0px' }">
          <div style=" padding: 5px 14px;background-color:rgb(242,120,120);color:white">
            <p>今日信息</p>
          </div>
          <div style="padding: 14px;">
            <el-row style="margin-bottom:14px">
              <el-row style="margin-bottom: 10px;">
                <el-col :span="12">
                  <el-row>
                    <el-col :span="12">
                      <span>今日预约人数：</span>
                    </el-col>
                    <el-col :span="12" style="font-size:18px">
                      <el-row>
                        <el-col :span="10">
                          <span>2</span>
                        </el-col>
                        <el-col :span="8">
                          <span>人</span>
                        </el-col>
                      </el-row>
                    </el-col>
                  </el-row>
                </el-col>
                <el-col :span="12">
                  <el-row>
                    <el-col :span="12">
                      <span>今日评估人数：</span>
                    </el-col>
                    <el-col :span="12" style="font-size:18px">
                      <el-row>
                        <el-col :span="10">
                          <span>1</span>
                        </el-col>
                        <el-col :span="8">
                          <span>人</span>
                        </el-col>
                      </el-row>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
            </el-row>
            <el-row style="margin-bottom:14px">
              <el-row>
                <el-col :span="12">
                  <el-row>
                    <el-col :span="12">
                      <span>今日已执行：</span>
                    </el-col>
                    <el-col :span="12" style="font-size:18px">
                      <el-row>
                        <el-col :span="10">
                          <span>1</span>
                        </el-col>
                        <el-col :span="8">
                          <span>份</span>
                        </el-col>
                      </el-row>
                    </el-col>
                  </el-row>
                </el-col>
                <el-col :span="12">
                  <el-row>
                    <el-col :span="12">
                      <span>今日未执行：</span>
                    </el-col>
                    <el-col :span="12" style="font-size:18px">
                      <el-row>
                        <el-col :span="10">
                          <span>1</span>
                        </el-col>
                        <el-col :span="8">
                          <span>份</span>
                        </el-col>
                      </el-row>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
            </el-row>
          </div>
        </el-card>
      </el-col>
      <el-col :span="11" style="float:right">
        <el-card :body-style="{ padding: '0px' }">
          <div style=" padding: 5px 14px;background-color:rgb(109,171,96);color:white">
            <p>汇总</p>
          </div>
          <div style="padding: 14px;">
            <el-row style="margin-bottom:14px">
              <el-row style="margin-bottom: 10px;">
                <el-col :span="12">
                  <el-row>
                    <el-col :span="12">
                      <span>预约人数：</span>
                    </el-col>
                    <el-col :span="12" style="font-size:18px">
                      <el-row>
                        <el-col :span="10">
                          <span>{{ yunmb }}</span>
                        </el-col>
                        <el-col :span="8">
                          <span>人</span>
                        </el-col>
                      </el-row>
                    </el-col>
                  </el-row>
                </el-col>
                <el-col :span="12">
                  <el-row>
                    <el-col :span="12">
                      <span>评估人数：</span>
                    </el-col>
                    <el-col :span="12" style="font-size:18px">
                      <el-row>
                        <el-col :span="10">
                          <span>10</span>
                        </el-col>
                        <el-col :span="8">
                          <span>人</span>
                        </el-col>
                      </el-row>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
            </el-row>
            <el-row style="margin-bottom:14px">
              <el-row>
                <el-col :span="12">
                  <el-row>
                    <el-col :span="12">
                      <span>已执行：</span>
                    </el-col>
                    <el-col :span="12" style="font-size:18px">
                      <el-row>
                        <el-col :span="10">
                          <span>6</span>
                        </el-col>
                        <el-col :span="8">
                          <span>份</span>
                        </el-col>
                      </el-row>
                    </el-col>
                  </el-row>
                </el-col>
                <el-col :span="12">
                  <el-row>
                    <el-col :span="12">
                      <span>未执行：</span>
                    </el-col>
                    <el-col :span="12" style="font-size:18px">
                      <el-row>
                        <el-col :span="10">
                          <span>4</span>
                        </el-col>
                        <el-col :span="8">
                          <span>份</span>
                        </el-col>
                      </el-row>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
            </el-row>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row style="margin:30px 0">
      <el-col :span="11">
        <el-card :body-style="{ padding: '0px' }">
          <div style=" padding: 5px 14px;background-color:rgb(223,186,123);color:white">
            <p>平台概况</p>
          </div>
          <div style="padding: 14px 0;overflow: hidden;text-align: center;">
            <el-card :body-style="{ padding: '0px', }" style="width:20% ; float: left;border: none;margin-left:4%;">
              <div style=" padding: 10px 14px;background-color:rgb(223,186,123);color:white">
                <el-row style="margin-bottom: 10px;">
                  <el-col :span="14">
                    <i class="el-icon-document" style="font-size: 50px;"></i>
                  </el-col>
                  <el-col :span="10" style="font-size:18px">
                    <el-row>
                      <el-col>
                        <span>2</span>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col>
                        <span>份</span>
                      </el-col>
                    </el-row>
                  </el-col>
                </el-row>
                <p>评估问卷</p>
              </div>
            </el-card>
            <el-card :body-style="{ padding: '0px', }" style="width:20% ; float: left;border: none;margin-left:4% ">
              <div style=" padding: 10px 14px;background-color:rgb(223,186,123);color:white">
                <el-row style="margin-bottom: 10px;">
                  <el-col :span="14">
                    <i class="el-icon-user-solid" style="font-size: 50px;"></i>
                  </el-col>
                  <el-col :span="10" style="font-size:18px">
                    <el-row>
                      <el-col>
                        <span>{{ yunmb }}</span>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col>
                        <span>人</span>
                      </el-col>
                    </el-row>
                  </el-col>

                </el-row>
                <p>预约人数</p>
              </div>
            </el-card>
            <el-card :body-style="{ padding: '0px', }" style="width:20% ; float: left;border: none;margin:0 4% ">
              <div style=" padding: 10px 14px;background-color:rgb(223,186,123);color:white">
                <el-row style="margin-bottom: 10px;">
                  <el-col :span="14">
                    <i class="el-icon-notebook-1" style="font-size: 50px;"></i>
                  </el-col>
                  <el-col :span="10" style="font-size:18px">
                    <el-row>
                      <el-col>
                        <span>{{ gy }}</span>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col>
                        <span>份</span>
                      </el-col>
                    </el-row>
                  </el-col>

                </el-row>
                <p>干预方案</p>
              </div>
            </el-card>
            <el-card :body-style="{ padding: '0px', }" style="width:20% ; float: left;border: none; ">
              <div style=" padding: 10px 14px;background-color:rgb(223,186,123);color:white">
                <el-row style="margin-bottom: 10px;">
                  <el-col :span="14">
                    <i class="el-icon-location" style="font-size: 50px;"></i>
                  </el-col>
                  <el-col :span="10" style="font-size:18px">
                    <el-row>
                      <el-col>
                        <span>{{ gyz }}</span>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col>
                        <span>人</span>
                      </el-col>
                    </el-row>
                  </el-col>

                </el-row>
                <p>干预追踪</p>
              </div>
            </el-card>
          </div>
        </el-card>
      </el-col>
      <el-col :span="11" style="float:right">
        <el-card :body-style="{ padding: '0px' }">
          <div style=" padding: 5px 14px;background-color:rgb(124,152,246);color:white">
            <p>会员统计</p>
          </div>
          <div style="padding: 14px 0;overflow: hidden;text-align: center;">
            <el-card :body-style="{ padding: '0px', }" style="width:28% ; float: left;border: none;margin-left:4%;">
              <div style=" padding: 10px 14px;background-color:rgb(124,152,246);color:white">
                <el-row style="margin-bottom: 10px;">
                  <el-col :span="14">
                    <i class="el-icon-folder-add" style="font-size: 50px;"></i>
                  </el-col>
                  <el-col :span="10" style="font-size:18px">
                    <el-row>
                      <el-col>
                        <span>1</span>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col>
                        <span>人</span>
                      </el-col>
                    </el-row>
                  </el-col>

                </el-row>
                <p>今日新增会员</p>
              </div>
            </el-card>
            <el-card :body-style="{ padding: '0px', }" style="width:28% ; float: left;border: none;margin:0 4% ">
              <div style=" padding: 10px 14px;background-color:rgb(124,152,246);color:white">
                <el-row style="margin-bottom: 10px;">
                  <el-col :span="14">
                    <i class="el-icon-s-custom" style="font-size: 50px;"></i>
                  </el-col>
                  <el-col :span="10" style="font-size:18px">
                    <el-row>
                      <el-col>
                        <span>1</span>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col>
                        <span>人</span>
                      </el-col>
                    </el-row>
                  </el-col>

                </el-row>
                <p>今日登录会员</p>
              </div>
            </el-card>
            <el-card :body-style="{ padding: '0px', }" style="width:28% ; float: left;border: none; ">
              <div style=" padding: 10px 14px;background-color:rgb(124,152,246);color:white">
                <el-row style="margin-bottom: 10px;">
                  <el-col :span="14">
                    <i class="el-icon-folder-opened" style="font-size: 50px;"></i>
                  </el-col>
                  <el-col :span="10" style="font-size:18px">
                    <el-row>
                      <el-col>
                        <span>{{ pnmb }}</span>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col>
                        <span>人</span>
                      </el-col>
                    </el-row>
                  </el-col>

                </el-row>
                <p>会员总数</p>
              </div>
            </el-card>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-card :body-style="{ padding: '0px' }">
          <div style=" padding: 5px 14px;background-color:rgb(194,87,246);color:white">
            <p>健康系统流程图</p>
          </div>
          <div style="padding: 14px;">
            <img src="@/views/assets/643842a642af73952a0311e7c93c1ec.jpg" alt="" style="width:100%;height:100%">
          </div>
        </el-card>
      </el-col>

    </el-row>

  </div>
</template>

<script>
export default {
  data() {
    return {
      gy: 0,
      pnmb: 0,
      gyz: 0,
      yunmb: 0,

    }


  },
  mounted() {
    this.Display()
  },
  methods: {
    Display() {
      this.$axios({//干预方案
        method: 'post',
        url: '/work/inter',

      }).then(res => {
        //console.log(res.data);
        this.gy = res.data
      })
      this.$axios({//总人数
        method: 'post',
        url: '/work/member',

      }).then(res => {
        //console.log(res.data);
        this.pnmb = res.data
      })
      this.$axios({//干预方案
        method: 'post',
        url: '/work/inter',

      }).then(res => {
        //console.log(res.data);
        this.gy = res.data
      })
      this.$axios({//预约人数
        method: 'post',
        url: '/work/yuyuemember',

      }).then(res => {
        //console.log(res.data);
        this.yunmb = res.data
      })
    }
  }



}
</script>

<style>
</style>